<template>
  <div class="app-container">

    <!-- 表单 -->
    <el-form size="small" :model="form" :inline="true">
      <el-form-item label="开始时间" style="font-weight:bold;">
        <el-date-picker v-model="form.startCreateTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd" style="width:150px;" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" style="font-weight:bold;">
        <el-date-picker v-model="form.endCreateTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd" style="width:150px;" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状 态" style="font-weight:bold;">
        <el-select placeholder="请选择状态" v-model="form.state" clearable style="width:150px;">
          <el-option label="已回复" value=1></el-option>
          <el-option label="未回复" value=0></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="意见分类" style="font-weight:bold;">
        <el-select placeholder="请选择意见分类" v-model="form.type" clearable style="width:150px;">
          <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item> -->

      <el-button size="small" class="search_button" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button size="small" class="reset_button" icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form>
    <!-- 表单 -->

    <el-divider></el-divider>
    <!-- 表格 -->
    <el-table size="medium" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" border>
      <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
      <el-table-column prop="userPhone" label="手机号" align="center"></el-table-column>
      <!-- <el-table-column prop="type" label="意见分类" align="center"></el-table-column> -->
      <el-table-column prop="opinionContent" label="意见建议" align="center" min-width="200">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" placement="bottom">
            <div slot="content" style="max-width: 800px;font-size:18px">{{ scope.row.opinionContent }}</div>
            <div style="text-align:left">
              {{ scope.row.opinionContent.length > 20 ? scope.row.opinionContent.substr(0, 20) + '...' :
                scope.row.opinionContent }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间" align="center"></el-table-column>
      <el-table-column prop="state" label="状态" align="center" width="70">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0">未回复</span>
          <span v-if="scope.row.state == 1">已回复</span>
        </template>
      </el-table-column>
      <el-table-column prop="replyContent" label="回复内容" align="center" min-width="200">
        <!-- <template slot-scope="scope">
          <el-tooltip class="item" effect="light" placement="bottom">
            <div slot="content" style="max-width: 600px;font-size:18px">{{ scope.row.replyContent }}</div>
            <div style="text-align:left">
              {{ scope.row.replyContent.length > 20 ? scope.row.replyContent.substr(0, 20) + '...' :
                scope.row.replyContent }}
            </div>
          </el-tooltip>
        </template> -->
      </el-table-column>
      <el-table-column prop="replyTime" label="回复时间" align="center"></el-table-column>
      <el-table-column prop="adminName" label="回复人" align="center"></el-table-column>
      <el-table-column prop="handle" label="操作" align="center" width="150">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="primary" plain @click="lookAdvice(scope.row)">查看</el-button> -->
          <el-button v-if="scope.row.state == 0" size="mini" type="primary" plain
            @click="replyAdvice(scope.row)">回复</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="意见与反馈" :visible.sync="dialogReply" width="50%">
      <el-form label-width="10%">
        <el-form-item>
          <el-input type="textarea" placeholder="请输入回复内容" v-model="replyForm.replyContent" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogReply = false">取 消</el-button>
        <el-button type="primary" @click="reply">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="意见与反馈" :visible.sync="dialogLook" width="40%">
      <div id="infoBox">
        <div id="infoBox_item">
          <div class="yuanOne"></div>
          <div>{{ adviceInfor.userName }} {{ adviceInfor.userNumber }}</div>
          <div>{{ adviceInfor.createTime }}</div>
        </div>
        <!-- <div id="line"></div> -->
        <div>{{ adviceInfor.opinionContent }}</div>
      </div>
      <div id="infoBox">
        <div id="infoBox_item">
          <div class="yuanOne" v-if="adviceInfor.replyTime"></div>
          <div class="yuanTwo" v-if="!adviceInfor.replyTime"></div>
          <div>管理员回复</div>
          <div>{{ adviceInfor.replyTime }}</div>
        </div>
        <!-- <div id="line"></div> -->
        <div>{{ adviceInfor.replyContent }}</div>
      </div>

    </el-dialog>


    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>

  </div>
</template>

<script>
import { getAdvice, replyAdvice, getType } from '@/api/Advice/index.js'
export default {
  data() {
    return {
      total: 0,
      labelPosition: "left",
      dialogReply: false,
      dialogLook: false,
      form: {
        current: 0,
        endCreateTime: "",
        field: "",
        order: "",
        pageSize: 10,
        startCreateTime: "",
        state: "",
        type: ""
      },
      tableData: [],
      replyForm: {
        id: "",
        replyContent: "",
        userId:window.localStorage.getItem('id')
      },
      adviceInfor: "",
      types: []
    }
  },
  methods: {
    getType() {
      getType().then(res => {
        if (res.data.success == true) {
          this.types = res.data.data
        }
      })
    },
    handleSelectionChange() {
    },
    lookAdvice(e) {
      this.adviceInfor = e
      this.dialogLook = true
    },
    //开启回复弹窗
    replyAdvice(e) {
      this.dialogReply = true
      this.replyForm.id = e.id
    },
    //回复
    reply() {
      replyAdvice(this.replyForm).then(res => {
        if (res.data.success == true) {
          this.dialogReply = false
          this.$message.success('回复成功！')
          this.reset()
        }
      })
    },
    search() {
      this.form.current = 0
      this.getAdvice()
    },
    reset() {
      this.form = {
        current: 0,
        endCreateTime: "",
        field: "",
        order: "",
        pageSize: 10,
        startCreateTime: "",
        state: ""
      }
      this.getAdvice()
    },
    handleCurrentChange(e) {
      //当前页
      // console.log(e-1)
      this.form.current = e - 1
      this.getAdvice()
    },
    handleSizeChange(e) {
      this.form.pageSize = e
      this.getAdvice()
    },
    //意见建议查询
    getAdvice() {
      getAdvice(this.form).then(res => {
        console.log(res)
        if (res.data.success == true) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      }).catch(error => {
        // console.log(error.response.status);
        // if (error.response.status == 401) {
        //   this.$confirm('登录状态过期, 请重新登录!', '提示', {
        //     confirmButtonText: '确定',
        //     // cancelButtonText: '取消',
        //     showCancelButton: false,
        //     type: 'warning'
        //   }).then(() => {
        //     this.$router.push('/login')
        //   }).catch(() => {

        //   })
        // }
      })
    },


  },
  created() {
    this.getAdvice()
    // this.getType()
  },


};
</script>
<style lang="scss" >
.search_button {
  margin-left: 50px;
}

.reset_button {
  margin-left: 20px;
}

.newly_button {
  margin-left: 0;
}

.dialogbutton {
  margin-top: 40px;
}

#infoBox {
  width: 100%;
  // border: 1px solid black;
  position: relative;
  border-radius: 10px;
  background-color: white;
  // padding: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.yuanOne {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(150, 196, 81);
  position: absolute;
  left: -16px;
  top: 4px;
}

.yuanTwo {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(183, 182, 181, 0.823);
  position: absolute;
  left: -16px;
  top: 4px;
}

#infoBox_item {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 4px;
}

#line {
  width: 100%;
  height: 1px;
  background-color: black;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  // left: calc(50% - 47%);
}

.pagination {
  float: right;
  margin-top: 10px;
}
</style>
